<template>
  <div class="header">
    <div class="header-top">
      <div class="top-container">
        <a href="#" class="logo"></a>
        <ul class="top-nav">
          <li>
            <router-link to="/home/discover">
              发现音乐
            </router-link>
          </li>

          <li><router-link to="/home/mymusic">我的音乐</router-link></li>
          <li><router-link to="/home/friend">朋友</router-link></li>
          <li><router-link to="/shopping">商城</router-link></li>
          <li><router-link to="/musiciam">音乐人</router-link></li>
          <li>
            <router-link to="/client">下载客户端<i class="hot"></i></router-link>
          </li>
        </ul>
        <!-- 头部的输入框 -->
        <div class="top-search">
          <!-- 放大镜logo -->
          <i class="top-search-logo"></i>
          <input type="text" placeholder="音乐/视频/电台/用户" />
        </div>
        <a href="#" class="creator">创作者中心</a>
        <a href="#" class="login">登录</a>
      </div>
    </div>
    <div class="header-bottom">
      <ul v-if="$route.fullPath.includes('/discover')">
        <li><router-link to="recommend">推荐</router-link></li>
        <li><router-link to="ranklist">排行榜</router-link></li>
        <li><router-link to="songlist">歌单</router-link></li>
        <li><router-link to="anchor">主播电台</router-link></li>
        <li><router-link to="singer">歌手</router-link></li>
        <li><router-link to="newdisc">新碟上架</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Header'
    }
  },
  created() {},
  methods: {}
}
</script>

<style scoped>
a {
  text-decoration: none !important;
}
.header {
  width: 100%;
  min-width: 1100px;
}
.header-top {
  width: 100%;
  height: 70px;
  background-color: #242424;
}
.top-container {
  display: flex;
  width: 1100px;
  height: 100%;
  margin: 0 auto;
}
.logo {
  width: 176px;
  height: 69px;
  background: url(https://s2.music.126.net/style/web2/img/frame/topbar.png?c7176a7a5e8395f732502c60466d533d);
}

.top-container ul {
  display: flex;
  line-height: 70px;
  height: 100%;
}
.top-container ul li {
  position: relative;
}
.top-container ul a {
  padding: 0 19px;
  display: block;
  color: #ccc;
  font-size: 14px;
  height: 100%;
}
.top-nav a.router-link-active {
  color: #fff;
  background: #000;
}
.top-nav a.router-link-active::before {
  content: '';
  display: block;
  position: absolute;
  bottom: -1px;
  left: 50%;
  margin-left: -6px;
  width: 12px;
  height: 7px;
  background: url('https://s2.music.126.net/style/web2/img/frame/topbar.png?621aad7e5c123fd66be62bf5e7ea9b30');
  background-position: -226px 0;
}

.hot {
  position: absolute;
  /* display: inline-block; */
  top: 15px;
  width: 28px;
  height: 19px;
  background: url(https://s2.music.126.net/style/web2/img/frame/topbar.png?c7176a7a5e8395f732502c60466d533d) no-repeat -190px 0;
}

.top-container ul a:hover {
  color: #fff;
  background: #000;
}
.top-search {
  position: relative;
  margin: 19px 0 0 75px;
}
.top-search input {
  height: 32px;
  width: 158px;
  border-radius: 20px;
  padding-left: 30px;
  outline: 0;
}
.top-search-logo {
  position: absolute;
  top: 5%;
  display: block;
  width: 30px;
  height: 30px;
  background: url(https://s2.music.126.net/style/web2/img/frame/topbar.png?2d3467debc3d7df5cb51a7c200258696) no-repeat 0 -99px;
}
.creator {
  display: block;
  width: 90px;
  height: 32px;
  margin: 19px 0 0 12px;
  box-sizing: border-box;
  padding-left: 16px;
  border: 1px solid #4f4f4f;
  line-height: 33px;
  color: #ccc;
  border-radius: 20px;
}
.login {
  display: block;
  width: 28px;
  margin: auto 0;
  padding-left: 10px;
  color: #787878;
}
.login:hover {
  color: #999;
}
/* 头部的下部分 */
.header-bottom {
  min-height: 5px;
  width: 100%;
  background-color: #c20c0c;
}
.header-bottom ul {
  display: flex;
  height: 35px;
  width: 1100px;
  margin: auto;
  box-sizing: border-box;
  padding-left: 180px;
}
.header-bottom a {
  font-size: 12px;
  color: white;
  padding: 3px 13px;
  margin: 7px 17px 0;
  border-radius: 20px;
  line-height: 32px;
}
.header-bottom a:hover {
  background: #9b0909;
}

/* 当路由到哪里时，该类名就添加到对应的路由标签上 */
.header-bottom a.router-link-exact-active {
  background: #9b0909;
}
</style>
